<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>候鸟旅行推荐</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        ul li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
            cursor: pointer;
        }
        
        input[type="text"] {
            outline: none;
            /* border: 0; */
            margin-left: 8px;
            /* background: red; */
            height: 22px;
        }
        
        main .item_list {
            clear: both;
            box-sizing: border-box;
            width: 368px;
            height: 103px;
            margin: 0 auto;
            border-top: 1px dotted #ccc;
        }
        /* main   .item_list * {
            border: 1px solid red;
        }
         */
        
        main .item_list li {
            position: relative;
            margin-top: 12px;
            box-sizing: border-box;
            float: left;
            width: 146px;
            height: 78px;
        }
        
        .item_list li a img {
            box-sizing: border-box;
            width: 100%;
        }
        
        .likes {
            position: absolute;
            top: 75%;
            right: 0;
            width: 36px;
            height: 16px;
            /* background: #000; */
            color: #fff;
            /* border: 1px solid #fff;   */
        }
        
        .item_list li:nth-child(2) {
            margin-left: 12px;
            width: 208px;
            height: 78px;
            /* background: red; */
        }
        
        .item_title {
            color: #000;
            box-sizing: border-box;
            width: 100%;
            height: 22px;
        }
        
        .address {
            display: inline-block;
            box-sizing: border-box;
            margin-top: 6px;
            /* width: 100%; */
            height: 22px;
            line-height: 22px;
            text-align: center;
            border-radius: 4px;
            color: #484848;
            background: #ccc;
        }
        
        .li_bottom {
            box-sizing: border-box;
            margin-top: 6px;
            width: 100%;
            line-height: 18px;
            height: 18px;
            clear: both;
            color: #666;
        }
        
        .li_bottom span {
            float: left;
            margin-left: 8px;
        }
        
        .li_bottom span:nth-child(2) {
            float: right;
            margin-right: 8px;
            /* background: red; */
        }
    </style>
</head>



<body style="font-size:12px">
    <button>获取数据</button>
    <main id="main">
        <!-- <ul class="item_list">
            <li>
                <a href="#">
                    <img src="https://pic.51houniao.com/f5f3be8c3bb3487ca3bce0d7aa669f00.jpg" alt="图片">
                    <p class="likes">
                        <span class="iconfont icon-like">350</span>
                    </p>
                </a>
            </li>
            <li>
                <div class="item_title">捷匈奥，幸福在这伸了个懒腰</div>
                <p class="address">
                    <span class="iconfont icon-address"></span>奥地利,捷克,匈牙利
                </p>
                <div class="li_bottom">
                    <span><span class="iconfont icon-shijian"></span>11天9晚</span><span><span class="iconfont icon-qianyue"></span>25061元起</span>
                </div>
            </li>
        </ul> -->
    </main>
    <!-- <script src="js/jquery-3.6.0.min.js"></script> -->
    <script src="js/flexible.js"></script>
    <script type="text/javascript">
        // 获取元素
        var oBtn = document.querySelector("button");
        var oMain = document.querySelector("main");
        // 给按钮添加点击事件
        oBtn.onclick = function() {

            // 对XMLHttpRequest对象进行异常处理
            try {
                // 1.创建XMLHttpRequest对象
                var xhr = new XMLHttpRequest();
            } catch (e) {
                var xhr = ActiveXObject('Microsoft.XMLHTTP'); //ie 低版本
            }


            //2.向地址栏输入地址
            xhr.open("get", "./tuijian.json", true);

            //3.回车提交
            xhr.send();
            // 4.等待服务器数据，并且接收
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) { //表示请求正常返回结果
                    var data = xhr.responseText;
                    var data_json = JSON.parse(data);

                    for (var i = 0; i < data_json.length; i++) {
                        var oUl = document.createElement("ul");

                        var str = `<ul class="item_list">
                            <li>
                                <a href="#">
                                    <img src="${data_json[i].proPicUrl}" alt="图片">
                                    <p class="likes">
                                        <span class="iconfont icon-like">${data_json[i].collectionNum}</span>
                                    </p>
                                </a>
                            </li>
                            <li>
                                <div class="item_title">${data_json[i].proTitle}</div>
                                <p class="address">
                                    <span class="iconfont icon-address"></span>${data_json[i].country}
                                </p>
                                <div class="li_bottom">
                                    <span><span class="iconfont icon-shijian"></span>${data_json[i].routingDat}天${data_json[i].routingNigth}晚</span><span><span class="iconfont icon-qianyue"></span>${data_json[i].amount}元起</span>
                                </div>
                            </li>
                        </ul>`;
                        oUl.innerHTML = str;
                        oMain.appendChild(oUl)

                    }

                }
            }
        }




        function my$(select) {
            return document.querySelectorAll(select);
        }
    </script>


</body>

</html>